<template>
  <div>
    <el-dialog title="11" :visible.sync="showTrackingPop" @close="colseTrackingPop">
      <div class="second-contain-box ma">
        <el-row>
          <el-col :span="12">
            <el-col :span="12">
              <i style="margin-top:0">跟进次数：{{trackingNum}}</i>
            </el-col>
          </el-col>
          <el-col :span="12">
            <el-col :span="8">
              <i style="margin-top:0">跟进时间：</i>
            </el-col>
            <el-col :span="16">
              <span>{{contractDate}}</span>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-col :span="6">
              <i>联系人：</i>
            </el-col>
            <el-col :span="16">
              <el-input placeholder="请输入内容" v-model="contactPeople"></el-input>
            </el-col>
          </el-col>
          <el-col :span="12">
            <el-col :span="6">
              <i>沟通形式：</i>
            </el-col>
            <el-col :span="18">
              <el-select style="width:100%" v-model="contractType" placeholder="请选择">
                <el-option
                  v-for="item in student_communication_type"
                  :key="item.value"
                  :label="item.value"
                  :value="item.key"
                ></el-option>
              </el-select>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-col :span="6">
              <i>客户类型：</i>
            </el-col>
            <el-col :span="16">
              <el-select
                style="width:100%"
                :disabled="typeDisabled"
                v-model="customerType"
                placeholder="请选择"
                @change="typeChange"
              >
                <el-option
                  v-for="item in student_type_options"
                  :key="item.value"
                  :label="item.value"
                  :value="item.key"
                ></el-option>
              </el-select>
            </el-col>
          </el-col>
          <el-col :span="12">
            <el-col :span="6">
              <i>客户进展：</i>
            </el-col>
            <el-col :span="18">
              <el-select
                style="width:100%"
                :disabled="selectDisabled"
                v-model="customerProgress"
                placeholder="请选择"
                @change="progressChange"
              >
                <el-option
                  v-for="item in student_progress_options"
                  :key="item.value"
                  :label="item.value"
                  :value="item.key"
                ></el-option>
              </el-select>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-col :span="3">
              <i>沟通内容：</i>
            </el-col>
            <el-col :span="21">
              <el-input
                style="width:100%"
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="contractContent"
              ></el-input>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <i style="margin-top:9%">跟进人：{{trackingPeople}}</i>
          </el-col>
          <el-col :span="12">
            <el-col :span="8">
              <i>下次跟进日期：</i>
            </el-col>
            <el-col :span="16">
              <el-date-picker
                style="width:100%"
                v-model="nextContractDate"
                type="datetime"
                placeholder="选择日期时间"
                :default-time="mytime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
              ></el-date-picker>
            </el-col>
          </el-col>
        </el-row>
      </div>
       <kt-button
        class="stu-btn"
        :label="$t('action.save')"
        perms="true"
        type="primary"
        size="medium"
        @click="handleSave()"/>
        <p class="tracking-tit">跟进情况</p>
        <Crm-table   
          :showBatchDelete="showBatchDelete" 
          class="tracking-table"
          :data="stuqueryTrackingData" 
          :columns="columns2"
          @findPage2='findPage2'
          :loading="loading">
        </Crm-table >
    </el-dialog>
  </div>
</template>
<script>
import CrmTable from "@/views/Core/CrmTable";
import KtButton from "@/views/Core/KtButton";
export default {
  name: "TrackingPop",
  props: {
    showTrackingPop: Boolean, //弹窗显示
    trackingNum: Number, //跟进次数
    contractDate: String, //跟进时间
    contactPeople: String, //联系人
    contractType: String, //沟通形式
    student_communication_type: Array, //沟通形式选项
    customerType:String,//客户类型
    student_type_options:Array,//客户类型选项
    customerProgress:String,//客户进展
    student_progress_options:Array,//客户进展选项
    contractContent:String,//沟通内容
    nextContractDate:String,
    trackingPeople:String
  },
  components: {
    CrmTable,
    KtButton
  },
  data() {
    return {
      // showTrackingPop: false, //显示跟进窗口
      date: new Date(),
      contractDate: "",
      // 限制跟进时间
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
        }
      },
    };
  },
  methods: {
    handShowTracking: function() {
      this.$emit("handShowTracking", { index: index, row: row });
    },
    colseTrackingPop: function() {
      this.$emit("colseTrackingPop");
    }
  }
};
</script>


<style lang='scss' scoped>
.query-box {
  .el-row {
    .el-col i {
      font-style: normal;
      text-align: right;
      float: left;
      font-size: 14px;
      color: #606266;
      line-height: 40px;
      padding: 0 0 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
  }
}
.checked-person {
  display: block;
  float: left;
  margin-top: -10%;
  margin-left: 35%;
}
.second-contain-box {
  width: 95%;
  margin: 0 auto;
  .el-col {
    text-align: left;
    margin: 1% 0;
  }
  .el-col i {
    font-style: normal;
    display: inline-block;
    margin-top: 10%;
  }
}
.inputbox {
  display: flex;
  flex-direction: row;
  span {
    display: block;
    width: 13%;
  }
  .el-input {
    width: 50%;
  }
  .el-textarea {
    float: left;
    margin-left: -4%;
  }
}
</style>
<style lang='scss'>
.batchdistribution-pop {
  .el-dialog__header {
    text-align: left;
    margin-left: 10%;
    font-weight: bold;
  }
}
.red {
  color: red;
}
</style>
